<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 插值表达式: 作用: 利用表达式进行插值，渲染到页面中 -->
  <!-- 表达式: 一段可以被求值的代码 js引擎会计算出对应的结果 -->
  <!-- 注意点
    1. 必须得在data中提供数据, 否则会报错
    2. 不能在插值内部写语句, 比如 if / for...
    3. 不能在标签属性中使用表达式
  -->
    <!-- 
     插值表达式：Vue的一种模板语法
     作用：利用 表达式 进行插值渲染
     语法：{{表达式}}
 -->
 <div class="" id="app">
  <p>{{msg}}</p>
  <p>{{msg+'你好'}}</p>
  <!-- 插值表达式
   toUpperCase() 将字符串转换为大写-->
  <p>{{msg.toUpperCase()}}</p>
  <!-- 三元运算符 -->
  <p>{{age>18?'成年':'未成年'}}</p>
  <!-- 对象的属性姓名 -->
  <p>{{friend.name}}</p>
  <!-- 对象的属性描述 爱好 -->
  <p>{{friend.desc}}</p>
  <p title="标题">{{msg}}</p>
</div>
<input id="cs" type="text">


<script src="./js/vue.js"></script>
<script>
  new Vue({
      el: '#app',
      data: {
          msg: 'tony',
          age:  18,
          // 描述
          friend:{
              name:'zk',
              desc:'我喜欢编程'
          }
      }
  })
</script>

</body>

</html>